<template>
  <p>
    <button @click="add" v-show="hasResource('010101')">
      <i class="ace-icon fa fa-edit"></i>
      新增
    </button>
    &nbsp;
    <button @click="refresh">
      <i class="ace-icon fa fa-undo"></i>
      刷新
    </button>
  </p>
  <table id="simple-table" class="table  table-bordered table-hover">
    <thead>
      <tr>
          <th>id</th>
          <th>登陆名</th>
          <th>昵称</th>
          <th>密码</th>
          <th>操作</th>
      </tr>
    </thead>

    <tbody>
    <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.loginName }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.password }}</td>
      <td>
        <div class="btn-group">

          <button @click="edit(user)" v-show="hasResource('010101')" class="btn btn-xs btn-info">
            <i class="ace-icon fa fa-pencil bigger-120"></i>
          </button>

          <button @click="editPassword(user)" v-show="hasResource('010103')" class="btn btn-xs btn-info">
            <i class="ace-icon fa fa-key bigger-120"></i>
          </button>

          <button @click="del(user.id)" v-show="hasResource('010102')" class="btn btn-xs btn-danger">
            <i class="ace-icon fa fa-trash-o bigger-120"></i>
          </button>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  <!-- 分页插件 -->
  <pagination ref="paginationRef" :list="getUserList" />

  <!-- Modal -->
  <div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">表单</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
                 <div class="form-group">
                   <label class="col-sm-2 control-label">登陆名</label>
                   <div class="col-sm-10">
                   <input v-model="user.loginName" :disabled="user.name" type="text" class="form-control">
                </div>
              </div>
                 <div class="form-group">
                   <label class="col-sm-2 control-label">昵称</label>
                   <div class="col-sm-10">
                   <input v-model="user.name" type="text" class="form-control">
                </div>
              </div>
                 <div v-show="!user.id" class="form-group">
                   <label class="col-sm-2 control-label">密码</label>
                   <div class="col-sm-10">
                   <input v-model="user.password" type="password" class="form-control">
                </div>
              </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button @click="saveUser" type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>
  <!--重置密码-->
  <div class="modal fade" id="edit-password-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">重置密码</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-2 control-label">密码</label>
              <div class="col-sm-10">
                <input type="password" v-model="user.password" class="form-control">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button @click="savePassword" type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {onMounted, ref} from "vue";
import pagination from "@/components/pagination";

export default {
  name: "User",
  components: {
    pagination,
  },
  setup() {
    // users 数组
    const users = ref([]);
    const user = ref({}); // 保存用户表单
    const paginationRef = ref(null);

    // 枚举字段

    // 刷新
    const refresh = () => {
      getUserList(1);
    }

    // 获取用户列表
    const getUserList = (page) => {
      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/system/admin/user/list",
          {
            page: page,
            size: paginationRef.value.size
          }
      ).then((response) => {
        Loading.hide();
        const resp = response.data;
        users.value = resp.content.list;
        paginationRef.value.render(page, resp.content.total);
      })
    }

    // 保存用户
    const saveUser = () => {
      // 保存参数校验
      if ( 1 != 1
                || !Validator.require(user.value.loginName, "登陆名")
                || !Validator.length(user.value.loginName, "登陆名", 1, 50)
                || !Validator.length(user.value.name, "昵称", 1, 50)
                || !Validator.require(user.value.password, "密码")
        )
      {
        return;
      }

      // 对用户密码加密 加盐(使得密码复杂) 如123很容易破解 但是加盐后很难破解
      user.value.password = hex_md5(user.value.password + KEY);

      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/system/admin/user/save", user.value).then((response) => {
        const resp = response.data;
        if (resp.success) {
          Loading.hide();
          $('#form-modal').modal('hide');
          Toast.success("保存成功");
          getUserList(1);
        } else {
          Loading.hide();
          Toast.warning(resp.message);
        }
      })
    }

    // 删除用户
    const del = (id) => {
      Confirm.show("删除后不可恢复，确认删除？", function () {
        Loading.show();
        axios.delete(process.env.VUE_APP_SERVER + "/system/admin/user/delete/" + id).then((response) => {
          const resp = response.data;
          if (resp.success) {
            //$('#form-modal').modal('hide');
            getUserList(1);
          }
        })
        Toast.success("删除成功");
      })
    }

    // 添加用户
    const add = () => {
      user.value = {};
      $('#form-modal').modal('show');
    }

    // 修改用户
    const edit = (param) => {
      // 方法一
      //user.value = JSON.parse(JSON.stringify(param));
      // 方法二
      user.value = $.extend({}, param);
      $('#form-modal').modal('show');
    }

    /**
     * 重置密码
     */
    const editPassword = (param) => {
      user.value = $.extend({}, param);
      user.value.password = null;
      $('#edit-password-modal').modal('show');
    }

    /**
     * 保存【重置密码】
     */
    const savePassword = () => {
      user.value.password = hex_md5(user.value.password + KEY);

      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/system/admin/user/edit-password", user.value).then((response) => {
        const resp = response.data;
        if (resp.success) {
          Loading.hide();
          $('#form-modal').modal('hide');
          Toast.success("修改密码成功");
          getUserList(1);
        } else {
          Loading.hide();
          Toast.warning(resp.message);
        }
      })
      $('#edit-password-modal').modal('hide');
    }

    /**
     * id: 资源id
     * 前端权限校验：菜单  菜单显示与隐藏
     */
    const hasResource = (id) => {
      return Tool.hasResource(id);
    }

    // 初始加载第一页
    onMounted(() => {
      getUserList(1);
    })

    return {
      users,
      refresh,
      paginationRef,
      getUserList,
      add,
      saveUser,
      user,
      edit,
      del,
      editPassword,
      savePassword,
      hasResource
    }
  }
}
</script>

<style scoped>

</style>